<template>
  <div class="form">
    <!-- 模特名称 -->
    <div class="form-item --name">
      <span class="label required">{{ $t('common.modelCreateView.avatarNameText') }}</span>
      <t-input
        class="value"
        v-model="form.name"
        :placeholder="$t('common.input.avatarNamePlaceholder')"
      />
    </div>

    <!-- 语言选择 -->
<!--    <div class="form-item &#45;&#45;language">-->
<!--      <span class="label required">{{ $t('common.modelCreateView.languageText', 'Language') }}</span>-->
<!--      <t-select-->
<!--        class="value"-->
<!--        v-model="form.language"-->
<!--        :placeholder="$t('common.input.languagePlaceholder', 'Select language')"-->
<!--      >-->
<!--        <t-option-->
<!--          v-for="lang in languageOptions"-->
<!--          :key="lang.code"-->
<!--          :value="lang.code"-->
<!--          :label="$t(`common.languages.${lang.code}`, lang.name)"-->
<!--        />-->
<!--      </t-select>-->
<!--    </div>-->

    <!-- 上传文件 -->
    <div class="form-item --upload">
      <ModalBoxUpload class="invoke" v-model="form.uploadInfo" />
      <ModalBoxGuide class="guide" />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import ModalBoxUpload from './ModalBoxUpload.vue'
import ModalBoxGuide from './ModalBoxGuide.vue'

const languageOptions = [
  { code: 'vi', name: '越南语' },
  { code: 'id', name: '印尼语' },
  { code: 'ms', name: '马来语' },
  { code: 'th', name: '泰语' },
  { code: 'zh', name: '中文' },
  { code: 'en', name: '英语' },
  { code: 'de', name: '德语' },
  { code: 'fr', name: '法语' },
  { code: 'ja', name: '日语' }
]

// Define the model with default values
const form = defineModel({
  default: {
    uploadInfo: {},
    name: '',
    language: 'zh' // Default to Chinese
  }
})
</script>

<style lang="less" scoped>
.form {
  &-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;

    &:not(:last-child) {
      margin-bottom: 20px; // Slightly reduced to accommodate the new language field
    }

    .label,
    .value {
      white-space: nowrap;
    }

    .label {
      min-width: 80px;
      font-size: 14px;
      color: #ffffff;
    }

    .label.required::before {
      content: '*';
      color: #eb5757;
      font-size: 12px;
      display: inline-block;
      margin-right: 2px;
    }

    .value {
      flex: 1;
    }

    :deep(.t-input),
    :deep(.t-select) {
      border: 1px solid rgba(255, 255, 255, 0.1);
      box-shadow: none;
      font-size: 12px;
      color: #ffffff;
      background-color: rgba(0, 0, 0, 0.2);

      &:hover, &:focus {
        border-color: rgba(67, 74, 249, 0.6);
      }
    }

    :deep(.t-select__dropdown) {
      background-color: #1d1e20;
      border: 1px solid #3f4041;

      .t-select-option {
        color: rgba(255, 255, 255, 0.8);

        &:hover, &.t-is-selected {
          background-color: rgba(67, 74, 249, 0.2);
        }

        &.t-is-selected {
          color: #ffffff;
        }
      }
    }

    &.--name,
    &.--language {
      width: 37%;
      --td-text-color-placeholder: rgba(255, 255, 255, 0.6);
    }

    &.--upload {
      align-items: stretch;
      height: 436px;
      gap: 40px;

      .invoke {
        flex: 5.6;
        overflow: hidden;
      }

      .guide {
        flex: 4.4;
      }
    }
  }
}
</style>
